<template>
  <div class="majorEquipment">
    <el-row class="h100">
      <el-col :span="16" class="h100">
        <div class="text-border">
          <div class="text-header">{{ title }}</div>
          <div class="search">
            <el-input
              placeholder="输入关键字过滤"
              class="treeInput"
              v-model="filterText"
              suffix-icon="el-icon-search"
              clearable
            ></el-input>
          </div>
          <div class="middle">
            <tableList
              v-if="true"
              ref="klTable"
              v-bind="tableConfig"
              @selectChange="selectChange"
              @defaultSelection="checkedUser"
              @selectAll="selectAll"
              @radioSelect="radioSelect"
            ></tableList>
          </div>
        </div>
      </el-col>
      <el-col :span="8" class="h100">
        <div class="text-border">
          <div class="text-header">
            已选择：<span>{{ choseNumber() }}</span>
          </div>
          <div class="right">
            <el-row :gutter="30" style="margin-bottom: 10px">
              <el-col :span="16"
                ><el-input
                  placeholder="输入关键字过滤"
                  size="mini"
                  class="treeInput"
                  v-model="choseFilter"
                  suffix-icon="el-icon-search"
                  clearable
                ></el-input
              ></el-col>
              <el-col :span="8" style="text-align: right"
                ><el-button
                  icon="el-icon-delete"
                  size="mini"
                  class="clearBtn"
                  @click="clearAll"
                  >清空</el-button
                ></el-col
              >
            </el-row>
            <div class="selectList">
              <!-- <div class="list-border"> -->
                <div
                  v-for="(i, index) in filterData"
                  :key="index"
                  class="chosedSelect"
                  :class="{ isActive: i.id == currentId }"
                  @click="clickChosed(i)"
                >
                  <span>
                    <label>{{ i.name }}</label>
                  </span>
                  <i
                    @click="delItem(index, i)"
                    class="el-icon-circle-close select-icon-close"
                  ></i>
                </div>
              <!-- </div> -->
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import PinyinMatch from "pinyin-match";
import tableList from "./tableList.vue";
export default {
  props: {
    seleteSetting: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: { tableList },
  data() {
    return {
      title: "人员",
      defaultExpandKeys: [],
      defaultProps: {
        label: "name",
        children: "children",
      },
      btnDisable: null,
      tableConfig: {
        radioShow: false,
        showAllSearch: true,
        showIndex: false,
        selectionShow: true,
        showFilterBtn: false,
        showCustomBtn: false,
        showPagetion: false,
        rowKey: "account",
        searchObj: {
          searchMethod: (params, sortStr) => {
            this.getTableData(params, sortStr);
          },
          searchArr: [],
          queryData: {
            page: 1,
            pageSize: 15,
          },
        },
        tableMethods: {
          rowClick: (row) => {
            let res = this.chosedData.every((item) => {
              return row.account != item.account;
            });
            this.selectChange(res, row);
            this.$refs.klTable.toggleRowSelection(row);
          },
        },
        actionList: [],
        column: [
          {
            label: "用户名",
            prop: "name",
          },
          {
            label: "账号",
            prop: "account",
          },
          {
            label: "所属组织",
            prop: "orgName",
          },
        ],
        tableData: [],
        pageSmall: true,
      },
      tableData: [],
      filterData: [],
      chosedData: [],
      currentId: "",
      filterText: "",
      choseFilter: "",
    };
  },
  created() {
    this.init();
  },
  mounted() {
    //this.$refs.klTable.searchData();
  },
  watch: {
    filterText(val) {
      this.filterTableData(val);
    },
    choseFilter(val) {
      this.filterChoseData(val);
    },
    chosedData(val) {
      this.filterChoseData(this.choseFilter);
    },
  },
  methods: {
    init() {
      let { chosedData, tableData } = this.seleteSetting;
      this.filterData = JSON.parse(JSON.stringify(chosedData));
      this.tableData = JSON.parse(JSON.stringify(tableData));
      this.tableConfig.tableData = tableData;
      this.chosedData = chosedData;
    },
    //勾选已选人员或组织
    checkedUser() {
      if (this.chosedData.length > 0) {
        this.chosedData.forEach((item) => {
          this.tableConfig.tableData.forEach((value) => {
            if (value.account == item.account) {
              this.$refs.klTable.selectioned(value);
            }
          });
        });
      }
    },
    //添加或取消已选用户
    selectChange(selected, row) {
      if (selected) {
        this.chosedData.push(row);
      } else {
        this.chosedData.forEach((item, i) => {
          if (item.id == row.id) {
            this.chosedData.splice(i, 1);
            return;
          }
        });
      }
    },
    selectAll(list) {
      this.tableConfig.tableData.forEach((item, i) => {
        this.selectChange(list, item);
      });
    },
    //单选框选中时触发
    radioSelect(row) {
      this.chosedData = [row];
    },
    //点击移除的时候触发
    delItem(index, row) {
      this.chosedData.forEach((item, i) => {
        if (row.account == item.account) {
          this.chosedData.splice(i, 1);
        }
      });
      this.tableConfig.tableData.map((item) => {
        if (item.account === row.account) {
          this.$refs.klTable.selectionCalce(item);
        }
      });
    },
    //清除所有
    clearAll() {
      this.chosedData.length = 0;
      this.filterData = [];
      this.$refs.klTable.clearSelection();
    },
    filterTableData(val) {
      let reg = new RegExp(val);
      let data = this.tableData.filter((item) => {
        if (item.name) {
          return item.name.match(reg) || PinyinMatch.match(item.name, val);
        }
      });
      this.tableConfig.tableData = data;
    },
    //过滤已选人员
    filterChoseData(val) {
      let reg = new RegExp(val);
      this.filterData = this.chosedData.filter((item) => {
        if (item.name) {
          return item.name.match(reg);
        }
      });
    },
    //选择人员或组织数量
    choseNumber() {
      return `${this.chosedData.length}人`;
    },
    clickChosed(i) {
      this.currentId = i.id;
    },
    //返回选择的数据
    getSelectData() {
      let data = JSON.parse(JSON.stringify(this.chosedData));
      return data;
    },
  },
};
</script>
<style  lang="less" scoped>
.majorEquipment {
  height: 600px;
  /deep/.el-input--mini .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
  .search {
    width: 40%;
    margin: 0 0 10px 10px;
  }
  .text-border {
    position: relative;
    height: calc(100% - 15px);
    margin: 5px;
    border: 1px #ebebeb solid;
    .text-header {
      height: 40px;
      line-height: 40px;
      padding: 0 14px;
      border-bottom: 1px #ebebeb solid;
      text-align: left;
      font-weight: 700;
      color: #666;
    }
    .tree-header {
      display: flex;
      justify-content: space-between;
    }
    .text-header:first-child {
      margin-bottom: 15px;
    }
    .left {
      height: calc(100% - 40px);
    }
    .middle {
      padding: 0 10px 10px 10px;
      height: calc(100% - 115px);
    }
    .right {
      height: calc(100% - 35px);
      padding: 0 10px;
      .selectList {
        height: calc(100% - 88px);
        overflow: auto;
        //max-height: 500px;
          .chosedSelect {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 4px 10px;
            line-height: 23px;
          }
          .clearBtn {
            border: 1px solid #0d60b4;
            color: #0d60b4;
          }
          .isActive {
            background-color: #f8f8f8;
          }

      }
    }
    .table-input {
      width: 95% !important;
      margin: 0 auto;
      .tableInputLeft {
        float: left;
        width: 35%;
      }
      .tableInputRight {
        float: right;
        width: 60%;
      }
      .tableInputLeft,
      .tableInputRight {
        height: 30px;
        line-height: 30px;
        border-radius: 2px;
        margin-bottom: 15px;
      }
    }
    .clearF::after {
      content: "";
      display: table;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    .select-text {
      float: left;
      margin-left: 10px;
      height: 20px;
      line-height: 12px;
    }
    .select-icon-close {
      float: right;
      margin-right: 10px;
    }
  }
  .outOrg {
    margin-left: 10px;
    background: rgba(250, 162, 36, 0.2);
    //color: #FAA224 ;
    opacity: 0.2;
    color: black;
    border-radius: 4px;
    padding: 1px 4px;
  }
  .interim {
    margin-left: 10px;
    background: rgba(239, 76, 76, 0.2);
    opacity: 0.2;
    border-radius: 4px;
    padding: 1px 8px;
    color: red;
  }
}
</style>